<template>
  <div class="login">
    <!--<mt-field label="手机号" placeholder="请输入手机号" ></mt-field>-->
    <!--<mt-field label="密码" placeholder="请输入密码"></mt-field>-->
    <input class="inp" type="tel" v-model="phone" placeholder="请输入手机号码" v-bind:maxlength="11"/>
    <input class="inp" type="password" v-model="password" placeholder="请输入密码" v-bind:maxlength="16">
    <mt-button type="primary" size="large" @click="doLogin">登录{{$store.state.user_id}}</mt-button>
  </div>
</template>

<script>
  import axios from 'axios';
  import {Toast} from 'mint-ui'
  import {message} from 'element-ui'

  export default {
    name:'index',
    data(){
      return{
        phone:'',
        password:'',
        id: 2
      }
    },
    methods:{
      setId(){
        this.$store.commit('setUserId',{userId:this.id})
      },

      resetId(){
        this.$store.commit('resetUserId')
      },

      checkValidity(){
        let isValid = true

        if (!this.phone || !this.password) {
          // this.$message.error({message: this.phone ? '密码不能为空' : '手机号不能为空'})
          Toast({
            message: this.phone ? '密码不能为空' : '手机号不能为空',
            duration: 1500
          });
          return false
        }

        if (!/^1[34578]\d{9}$/.test(this.phone)) {
          //this.$message.error({message: '手机号不合法'})
          Toast({
            message: '手机号不合法',
            duration: 1500
          });
          isValid = false
        }

        return isValid
      },
      doLogin(){
        if(this.checkValidity()){
          /*
          ** 用户登录接口
          */
          let app = this;
          axios.post('http://yaobeier.cn:8080/RR_Consumer/user/login', {
            phone: this.phone,
            pwd: this.password
          }).then(function(response){
            if(response.data.success==false){
              app.$router.push({path: '/recycler/orders'})
            }
          }).catch(function (error){
            console.log(error);
          });
          this.setId()
        }
      }
    }
  }
</script>

<style scoped>
.login{
  width: 100%;
}
.inp{
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size:16px;
  padding: 5px;
  outline: none;
  border-width: 0px;
}
</style>
